<template>
  <div class="economy">
    <div class="main">
      <span class="icon iconfont icon-feiji plane">地产列表</span>
      <div class="content">
        <el-row
          v-for="item in formData"
          :key="item.id"
          @click.native="toDetails(item.id)"
        >
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <img :src="item.image" alt />
            </div>
          </el-col>
          <el-col :span="16">
            <div class="grid-content bg-purple-light">
              <h2>{{ item.name }}</h2>
              <p>{{ item.desc }}</p>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import { getPropertyList } from "@/api/property";
export default {
  data() {
    return {
      categoryId: "",
      formData: [],
      title: "",
    };
  },
  async created() {
    this.categoryId = this.$route.query.category;
    this.title = this.$route.query.name;
    if (this.categoryId) {
      let res = await getPropertyList({ category: this.categoryId });
      this.formData = res.data;
    }
    if (this.title) {
      let res = await getPropertyList({ title_contains: this.title });
      this.formData = res.data;
    }
  },
  methods: {
    toDetails(id) {
      console.log(111, id);
      this.$router.push({
        path: "/propertyDetails",
        query: {
          id,
        },
      });
    },
  },
};
</script>

<style lang='scss'>
@import url("@/assets/planeIconfont/iconfont.css");
.economy {
  // background-color:aqua;
  width: 75%;
  margin: 0 auto;
  .main {
    .plane {
      font-size: 5vh;
      color: #eba73a;
    }
    .content {
      .el-row {
        margin: 10px auto;
        height: 20vh;
        border: 1px solid #dddddd;
        .el-col {
          // border: 1px solid #dddddd;

          img {
            width: 25wh;
            height: 19vh;
            margin: 0 auto;
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            // border-right: 1px solid #eeeeee;
          }
          .bg-purple {
            border-right: 1px solid #eeeeee;
          }
          .bg-purple-light {
            // height: 200px;
            h2 {
              text-align: center;
              padding: 5px 0;
            }
            p {
              text-indent: 2em;
              padding: 0 15px;
              line-height: 30px;
            }
          }
        }
      }
    }
  }
}
</style>